<template>
  <div class="new-card">
    <div class="colors">
      <p
        class="color-li"
        v-for="(item, index) in cardColor1"
        :key="index"
        :style="{ background: item }"
        :class="{ colorSelected: index == colorSelected }"
        @click="changColor(index)"
      ></p>
    </div>
    <div class="card-main">
      <textarea
        name=""
        placeholder="留言..."
        class="message"
        maxlength="96"
      ></textarea>
      <input type="text" placeholder="签名" class="name" />
    </div>
  </div>
</template>

<script>
import { cardColor, cardColor1 } from "@/utils/data";
export default {
  data() {
    return {
      cardColor,
      cardColor1,
      colorSelected: 0, //默认选择的颜色
    };
  },
  methods: {
    changColor() {
      this.selected = 1;
    },
  },
  props: {},
};
</script>

<style lang="scss" scoped>
.new-card {
  padding: 0 20px;
  .colors {
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    .color-li {
      width: 24px;
      height: 24px;
      margin-right: 8px;
      // float: left;
    }
    .colorSelected {
      border: 1px solid rgba($color: #3b73f0, $alpha: 1);
    }
  }
  .card-main {
    width: 320px;
    height: 240px;
    background: rgba(252, 175, 162, 0.31);
    padding: 12px;
    .message {
      background: none;
      border: none;
      resize: none;
      width: 100%;
      height: 80%;
      font-size: 16px;
      padding: 8px;
    }
    .name {
      font-family: "fangsong";
      font-weight: 900;
      font-size: 16px;
      width: 100%;
      height: 36px;
      padding-left: 12px;
      background: none;
      border: 1px solid rgba(255, 255, 255, 1);
    }
  }
}
</style>